<template>
    <view-box style="background:#F3F6F7;">
       <div style="height:15px;"></div>
       <div class="backgr-bac">
           <div class="background-ppoui">
               <p>评论内容</p>
           </div>
           <div class="back-clso">
               <x-textarea :max="1000" placeholder="请在此输入评论内容~~" v-model="content" :show-counter="false" :height="60" :rows="8" :cols="30"></x-textarea>
           </div>
       </div>
       <div style="height:40px;"></div>
       <div class="width-backhg">
           <x-button class="backgr-button" @click.native="save"> 评论</x-button>
       </div>
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, XInput, XTextarea, XButton, PopupRadio, Group } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem,
    XInput,
    XTextarea,
    XButton,
    PopupRadio,
    Group
  },
  data () {
    return {
      option3: '选择分类',
      options3: [],
      sort_id: 0,
      title: '',
      content: '',
      staidc: []

    }
  },
  mounted () {
    // this.details()
  },
  methods: {
    save () {
      if (this.content === '') {
        this.$vux.toast.show({
          text: '内容不能为空',
          type: 'text'
        })
        return false
      }
      let data = {
        post_id: this.$route.query.pldi,
        target_id: this.$route.query.uid,
        comment: this.content
      }
      this.$http.post('/forumComment', data).then(response => {
        this.$vux.toast.show({
          text: '评论成功',
          type: 'text'
        })
        this.$router.push({ path: '/forum' })
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .backgr-bac{
      background: #fff;
      width: 100%;

  }
  .background-ppoui{
      width: 92%;
      margin-left: 4%;
      border-bottom: 1px solid #f4f4f4;
      line-height: 50px;
  }
  .back-opljh{
      width: 100%;
      height: 60px;
  }
.back-clso{
      width: 100%;
      height: auto;
  }
  .width-backhg{
      width: 92%;
      margin-left: 4%;

  }
  .backgr-button{
      background: #32B6C6;
      color: #fff;
  }
</style>